<template>
  <div>
    <re-el-table
      :data="tableData"
      border
      :span-method="objectSpanMethod"
      :show-limit="hiddenTableData"
      :key="shipment.status2"
    >
      <el-table-column
        v-for="v in showShipmentBoxTypeFlFields"
        :key="v.prop"
        :prop="v.prop"
        :label="v.label"
        :align="v.align"
        :min-width="v.minWidth"
        :fixed="v.fixed ? v.fixed : false"
        :show-overflow-tooltip="!!v.showOverflowTooltip"
        :sortable="v.sortable ? v.sortable : false"
      >
        <!-- 表头 暂时都不需要改 -->
        <template #header>
          {{v.label}}
        </template>
        <!-- 表格内容 -->
        <template v-slot="{row}">

          <template v-if="v.prop === 'boxId'">
            <template v-if="row.isSortingExcept">
              <el-tooltip
                content="海外未接收到当前货件"
                placement="top"
              >
                <span class="font-red"><i class="el-icon-warning"></i>{{row.boxId}}</span>
              </el-tooltip>
            </template>
            <template v-else-if="row.isReceiveExcept">
              <el-tooltip
                content="国内未接收到当前货件"
                placement="top"
              >
                <span class="font-red"><i class="el-icon-warning"></i>{{row.boxId}}</span>
              </el-tooltip>
            </template>
            <template v-else>
              {{row.boxId}}
            </template>
          </template>

          <template v-else-if="v.prop === 'oldBoxId'">
            {{row.oldBoxId || '-'}}
          </template>

          <template v-else-if="v.prop === 'boxType'">
            {{getBoxTypeStr(row.boxType)}}
          </template>

          <template v-else-if="v.prop === 'logisticsNo'">
            {{row.logisticsNo || '-'}}
          </template>

          <template v-else-if="v.prop === 'estimateTime'">
            {{row.estimateTime || '-'}}
          </template>

          <template v-else-if="v.prop === 'goodsIds'">
            <template v-if="row.isFullBox">
              <div
                v-for="listing in row.suitSkuList"
                :key="listing.id"
              >
                {{listing.goodsId}}{{listing.sku ? `(${listing.sku})` : ''}}
              </div>
            </template>
            <template v-else>
              <template v-if="row.isTB">
                未贴标（{{row.sku}}）
              </template>
              <template v-else-if="row.isSystemLabel">
                系统标 （{{row.sku}}）
              </template>
              <template v-else>
                {{row.goodsId}} （{{row.sku}}）
              </template>
            </template>
          </template>

          <template v-else-if="v.prop === 'rlGoodsNum'">

            <template v-if="row.status === STATUS_SORTED()">
              <!-- 未贴标并且货件单类型是一件代发不可编辑 -->
              <template v-if="row.isTB && shipment.shipmentType === 'one_shipping'">
                {{row.rlGoodsNum || '-'}}
              </template>
              <template v-else>
                <el-input-number v-model="row.rlGoodsNum" :precision="0" :min="0"></el-input-number>
              </template>
            </template>
            <template v-else-if="row.status === STATUS_LISTED()">
              {{row.rlGoodsNum}}
            </template>
            <template v-else>
              -
            </template>

          </template>
          <template v-else-if="v.prop === 'boxRlNum'">
            <template v-if="row.status === STATUS_SORTED()">
              {{getBoxRlNum(row)}}
            </template>
            <template v-else-if="row.status === STATUS_LISTED()">
              {{row.boxRlNum || '-'}}
            </template>
            <template v-else>
              -
            </template>
          </template>
          <template v-else-if="v.prop === 'status'">
            <template v-if="shipment.status2 === WAIT_SORTING()">
              <template v-if="row.status === STATUS_WAIT_SORTING()">
                <el-tag type="warning" effect="dark" @click="sortedBox(row)" style="cursor: pointer">待分拣</el-tag>
              </template>
              <template v-else-if="row.status === STATUS_SORTED()">
                <el-tag type="success" effect="dark">已分拣</el-tag>
              </template>
            </template>
            <template v-else>
              {{getBoxStatusStr(row.status)}}
            </template>
          </template>
          <template v-else-if="v.prop === 'op'">
            <template v-if="row.status === STATUS_SORTED() && canEdit">
              <el-button type="primary" @click="saveRlGoodsNum(row)">保存</el-button>
            </template>
            <template v-else-if="shipment.status2 === WAIT_SORTING() && row.status === STATUS_WAIT_SORTING()">
              <el-button type="primary" @click="sortedBox(row)">确认已分拣</el-button>
            </template>
            <template v-else>
              /
            </template>
          </template>

          <template v-else>{{row[v.prop]}}</template>
        </template>
      </el-table-column>

    </re-el-table>
  </div>
</template>

<script>
import ReElTable from "@/components/Common/ReElTable.vue";
import MLCodeListColumn from "@/views/stock/components/MLCodeListColumn.vue";
import MLCodeColumn from "@/views/stock/components/MLCodeColumn.vue";
import {FINISHED_SORTING, WAIT_FL_RECEIVE, WAIT_SORTING} from "@/utils/shipment";
import {PLAN_TYPE_FL, PLAN_TYPE_MW} from "@/utils/shippingPlan";
import {
  getBoxStatusStr,
  getBoxTypeStr,
  STATUS_CREATED,
  STATUS_LISTED,
  STATUS_RECEIVED,
  STATUS_SORTED, STATUS_WAIT_SORTING
} from "@/utils/boxLabel";
import {saveBoxLabelGoodsNum, sortedShipmentBoxLabel} from "@/api/shipmentV2";
import {shipmentBoxTypeFlFields, shipmentBoxTypeMWFields} from "@/views/shipment/config/shipmentBoxFields";
import {isFirstLegRole, isInboundSortingRole} from "@/utils/common";

export default {
  name: "ShipmentBoxTable2",
  components: {ReElTable},
  props: {
    tableData: {
      type: Array,
      required: true,
    },
    shipment: {
      type: Object,
      required: true,
    },
    hiddenTableData: {
      type: Boolean,
      default: true,
    }
  },
  data(){
    return {
      shipmentBoxTypeMWFields
    }
  },
  computed: {
    canEdit(){
      return this.shipment.status2 === FINISHED_SORTING && !isInboundSortingRole();
    },
    showShipmentBoxTypeFlFields(){
      let filterProps = []; // 不需要的栏位
      if(isInboundSortingRole()){
        filterProps.push(
          'rlGoodsNum', 'boxRlNum',
        )
      }
      return this.shipmentBoxTypeMWFields.filter(item => !filterProps.includes(item.prop))
    },
    mergeCell(){
      const mergeObj = {};
      const mergeField = 'boxId'; // 合并的字段
      const mergeFieldArr = [
        'boxId',
        'boxType',
        'weight',
        'squareNumber',
        'volumeWeight',
        'status',
        'boxExNum',
        'boxRlNum',
        'op',
        'oldBoxId',
        'logisticsNo',
        'estimateTime'
      ]; // 合并的单元格

      mergeFieldArr.forEach(key=>{
        mergeObj[key] = [1];
      })

      let mergeFieldKey = 0;
      this.tableData.forEach((item,index)=>{
        // 第一列数据不处理
        if(index === 0){
          return;
        }
        // 根据合并字段 合并
        if(item[mergeField] && item[mergeField] === this.tableData[index - 1][mergeField]){
          mergeFieldArr.forEach(key=>{
            mergeObj[key][mergeFieldKey] += 1;
            mergeObj[key].push(0); // 添加一个0 站位
          })
        }else{
          mergeFieldKey = index; // 记录当前行
          mergeFieldArr.forEach(key=>{
            mergeObj[key].push(1); // 添加一个1
          })
        }
      })

      return mergeObj;
    },
  },
  methods: {
    WAIT_SORTING(){
      return WAIT_SORTING;
    },
    PLAN_TYPE_MW() {
      return PLAN_TYPE_MW
    },
    PLAN_TYPE_FL() {
      return PLAN_TYPE_FL
    },
    STATUS_LISTED() {
      return STATUS_LISTED
    },
    STATUS_SORTED() {
      return STATUS_SORTED
    },
    getBoxStatusStr,
    STATUS_CREATED() {
      return STATUS_CREATED
    },
    STATUS_RECEIVED() {
      return STATUS_RECEIVED
    },
    STATUS_WAIT_SORTING(){
      return STATUS_WAIT_SORTING
    },
    getBoxTypeStr,
    changeSize(row){
      const weight = row.weight
      const volumeWeight = row.volumeWeight
      const squareNumber = row.squareNumber
      this.tableData.filter(item => item.boxId === row.boxId)
        .forEach(item => {
          item.weight = weight
          item.volumeWeight = volumeWeight
          item.squareNumber = squareNumber
          // 都填了
          if(item.weight && item.volumeWeight && item.squareNumber){
            item.status = STATUS_RECEIVED
          }else{
            item.status = STATUS_CREATED
          }
        })

    },
    getBoxRlNum(row){
      return this.tableData.filter(item => item.boxId === row.boxId).reduce((prev, cur) => prev + (cur.rlGoodsNum ? cur.rlGoodsNum : 0), 0)
    },
    saveRlGoodsNum(row){
      const data = this.tableData.filter(item => item.boxId === row.boxId)
        .map(item => {
          return {
            id: item.id,
            boxId: item.boxId,
            rlGoodsNum: item.rlGoodsNum
          }
        })
      const postData = {
        boxData: data,
      }
      saveBoxLabelGoodsNum(postData)
        .then(res=>{
          this.$successMessage(res.message)
        })
    },
    // 已分拣箱子
    sortedBox(row){
      const data = {
        shipmentId: this.shipment.id,
        boxId: row.boxId
      }
      this.tableData.filter((item => item.boxId === row.boxId))
        .forEach(item => {
          item.status = STATUS_SORTED
        })
      sortedShipmentBoxLabel(data)
        .then(res=>{
          this.$successMessage(res.message)
        })
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      const mergeCell = this.mergeCell
      if(mergeCell[column.property]){
        if(mergeCell[column.property][rowIndex]) {
          return [mergeCell[column.property][rowIndex], 1]
        } else {
          // 如果为0则为需要合并的行
          return [0, 0];
        }
      }
    },


  },
}
</script>


<style scoped lang="scss">

</style>
